<template>
    <div class="not_auth_error_box">
        <div class="container">
            <div class="container-tip">系 统 提 示 . . .</div>
            <div class="container-info">
                <div>
                    尊敬的：
                    <span class="admin">{{
                        user.userName ?? "用户"
                    }}</span>
                </div>
                <div class="not-auth-tip">
                    <span
                        >您还没有权限访问此页面，请到
                        <span class="system">“系统设置 > 用户管理”</span>
                        进行权限操作(You Don't Have Permission To
                        Access)。</span
                    >
                </div>
                <div class="wait">
                    <span>页面将</span>
                    <span class="tips" @click="$router.back()"
                        >自动返回 / 手动跳转</span
                    >
                    <span>等待时间：</span>
                    <span class="number">{{ count }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            count: 6,
            timer: null,
        };
    },
    computed: {
        ...mapState('user', ['user'])
    },
    mounted() {
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.setTimeCount();
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    methods: {
        setTimeCount() {
            this.timer = setInterval(() => {
                if (this.count === 0) {
                    clearInterval(this.timer);
                    this.count = 6;
                    this.$router.back();
                } else {
                    this.count--;
                }
            }, 1000);
        },
    },
};
</script>

<style lang="less" scoped>
.not_auth_error_box {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #f8f9fb;
    position: relative;
    box-sizing: border-box;

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 460px;
        background-color: #fff;
        border-radius: 6px;
        border: 1px solid #dfe4ec;
        padding-top: 5%;

        &-tip {
            font-size: 36px;
            font-weight: 700;
            color: #6cc971;
            text-align: center;
        }

        &-info {
            padding-left: 6%;
            margin-top: 30px;
            color: #333;

            .admin {
                color: #6cc971;
            }
        }

        .not-auth-tip {
            padding-left: 30px;
            margin-top: 30px;

            .system {
                color: #ff0000;
            }
        }

        .wait {
            padding-left: 20px;
            margin-top: 30px;

            .tips {
                color: #8c749f;
                padding-left: 2px;
                padding-right: 2px;

                &:hover {
                    cursor: pointer;
                }
            }

            .number {
                font-size: 18px;
            }
        }
    }
}
</style>
